<template>
	<view class="page text-white">
		<view :style="{'paddingTop':startTop + 'px'}" class="myPage" style="position:relative;z-index:99;">
			<view class="headTitle">
				<view class="flex-center text-36" :style="{'lineHeight':nangHeight + 'px'}">
					个人中心
				</view>
			</view>
			<view class="w690 flex-start" @click="goSetting">
				<view class="userBg flex-center">
					<view class=" ">
						<image @click="addDevice" class="userIcon"
							:src="userBaseInfo.avatar ? userBaseInfo.avatar : 'http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/user.png'">
						</image>
					</view>
				</view>
				<view class=" flex-column">
					<view style="height:60rpx;">
						<view class="text-36 text-weight text-green">{{userBaseInfo.nickname}}</view>
						<view class="text-30" style="margin-top: 10rpx;">{{userBaseInfo.levelId || '--'}}</view>
						<view class="text-26" style="margin-top: 10rpx;">邀请ID：{{userBaseInfo.invCode || '--'}}</view>
					</view>

				</view>
			</view>
			<!-- 分享 -->
			<view class="w690 shareBg flex-column-center">
				<view class="flex-between shareCon" @click="goYaoqing" style="">
					<view class="text-weight text-30" style="color:#2C2C2C;">邀请好用获得更过收益</view>
					<view class="shareBtn flex-center text-30">分享邀请</view>
				</view>
			</view>
			<!-- 订单 -->
			<view class="w690 orderBg" @click="selectOrder" :class="!isShowBg ? 'defaultOrder' : 'activeOrder'">
				<view class="flex-between ">
					<view class="flex-start">
						<!-- :class="item.value ? 'defaultOrder' : 'activeOrder'" -->
						<view class="flex-center text-30" style="width:220rpx;padding-top:14rpx;"
							v-for="(item,index) in orderClasses" @click="chooseOrder(item)">
							{{item.name}}
						</view>
					</view>
					<view class="text-22 flex-start" style="padding-right:40rpx;box-sizing: border-box;">
						查看更多
						<up-icon name="arrow-right" color="#fff" size="14"></up-icon>
					</view>
				</view>
				<view class="flex-around orderAll">
					<view class="flex-column-center">
						<view>
							<image @click="addDevice" class="orderIcon"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/daifukuan@2x.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="text-26">待付款</view>
					</view>
					<view class="flex-column-center">
						<view>
							<image @click="addDevice" class="orderIcon"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/daifahuo@2x.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="text-26">待发货</view>
					</view>
					<view class="flex-column-center">
						<view>
							<image @click="addDevice" class="orderIcon"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/daishouhuo@2x.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="text-26">待收货</view>
					</view>
					<view class="flex-column-center">
						<view>
							<image @click="addDevice" class="orderIcon"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yiwancheng@2x.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="text-26">已完成/评价</view>
					</view>
					<view class="flex-column-center">
						<view>
							<image @click="addDevice" class="orderIcon"
								src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/shouhou@2x.png"
								mode="aspectFill">
							</image>
						</view>
						<view class="text-26">售后</view>
					</view>
				</view>
			</view>
			<!-- 我的钱包 -->
			<view class="w690 moneyBg">
				<view class="flex-between">
					<view class="text-32">我的钱包</view>
					<view class="flex-start">
						<view class="tixian flex-center" @click="goFenRun">分润</view>
						<view class="tixian flex-center" @click="tiXian">提现</view>
					</view>
				</view>
				<view class="flex-around" style="margin-top:20rpx;">
					<view class="flex-column-center">
						<view class="text-32 text-weight">{{userBaseInfo.point}}</view>
						<!-- <view class="text-22 moneyTop">账号余额(元)</view> -->
						<view class="text-22 moneyTop">余额(元)</view>
					</view>
					<view class="flex-column-center">
						<view class="text-32 text-weight">{{zongShowYi.incomeTotal.total}}</view>
						<view class="text-22 moneyTop">累计收益(元)</view>
					</view>
					<!-- <view class="flex-column-center">
						<view class="text-32 text-weight">51463.20</view>
						<view class="text-22 moneyTop">可提现余额</view>
					</view> -->
				</view>
			</view>
			<!-- 推荐工具 -->
			<view class="w690 tuiJianBg">
				<view class="text-30 flex-start" style="height:70rpx;padding-left:20rpx;">推荐工具</view>
				<view class="tuiJianMain">
					<up-row customStyle="margin-bottom: 16px">
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goYaoqing">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yaoqing-icon@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">邀请好友</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goZhaoMu">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yewu-icon@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">业务招募</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goOnline">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/liaotian@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">聊天</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goHelpMing">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/bangzhu-icon@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">帮助说明</view>
						</up-col>
					</up-row>
					<up-row>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goYongXu">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/xuzhi@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">使用须知</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goKefu">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/kefu@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">联系客服</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goShouKuan">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/shoukuan-icon@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">收款设置</view>
						</up-col>
						<up-col span="3">
							<view class="flex-center jianBottom" @click="goSystem">
								<image class="jianIcon"
									src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/shezhi-icon@2x.png"
									mode="aspectFill">
								</image>
							</view>
							<view class="flex-center text-26">系统设置</view>
						</up-col>
					</up-row>
				</view>
			</view>

		</view>

		<up-gap height="20" bgColor="#11102A"></up-gap>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	// 胶囊顶部的距离
	const startTop = ref("");

	// 胶囊的高度
	const nangHeight = ref("");

	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');

		// 胶囊距离顶部的距离
		startTop.value = globalData.value.barTop;


		// 设置胶囊的高度
		nangHeight.value = globalData.value.capsuleData.height;

		// if (uni.getStorageSync('token')) {
		getUserInfo()
		// }
	})

	// 用户基本信息
	const userBaseInfo = ref({
		nickname: "微信用户",
		point: 0
	});


	// 获取用户信息
	const getUserInfo = () => {
		let e = {
			url: '/app-api/member/user/get'
		};
		api.default.get(e).then((res) => {
			if (res.data.levelId == 0) {
				res.data.levelId = "普通会员"
			} else if (res.data.levelId == 1) {
				res.data.levelId = "安装工"
			} else if (res.data.levelId == 2) {
				res.data.levelId = "团队长"
			} else if (res.data.levelId == 3) {
				res.data.levelId = "城市代理"
			} else if (res.data.levelId == 4) {
				res.data.levelId = "联营合伙人"
			}

			if (res.data.point) {
				res.data.point = res.data.point / 10000;
			}
			userBaseInfo.value = res.data;

			getZongYi();
		})
	}

	// 总收益
	const zongShowYi = ref({
		incomeTotal: {
			total: 0
		}
	});

	// 获取总收益 /app-api/index/index
	const getZongYi = () => {
		let e = {
			url: '/app-api/index/index',
			data: {
				levelId: userBaseInfo.value.levelId
			}
		};
		api.default.get(e).then((res) => {
			// 大节点收益
			res.data.incomeNode = {
				month: res.data.incomeNode.month / 10000,
				total: res.data.incomeNode.total / 10000,
				yesterday: res.data.incomeNode.yesterday / 10000
			}

			// 路由器收益
			res.data.incomeRouter = {
				month: res.data.incomeNode.month / 10000,
				total: res.data.incomeNode.total / 10000,
				yesterday: res.data.incomeNode.yesterday / 10000
			}

			// 路由器收益
			res.data.incomeRouter = {
				month: res.data.incomeSmallBox.month / 10000,
				total: res.data.incomeSmallBox.total / 10000,
				yesterday: res.data.incomeSmallBox.yesterday / 10000
			}

			// 总收益
			res.data.incomeTotal = {
				month: res.data.incomeTotal.month / 10000,
				total: res.data.incomeTotal.total / 10000,
				yesterday: res.data.incomeTotal.yesterday / 10000
			}



			zongShowYi.value = res.data;
		})
	}

	// 订单背景
	const isShowBg = ref(false);

	// 订单分类
	const orderClasses = reactive([{
		name: "租赁订单",
		value: 0
	}, {
		name: "购买订单",
		value: 1
	}])

	// 选择订单
	const chooseOrder = (val) => {
		if (val.value == 0) {
			isShowBg.value = false
		} else {
			isShowBg.value = true
		}
	}
	// 去设置界面
	const goSetting = () => {
		// uni.navigateTo({
		// 	url: "/pages/my/myChild/setting"
		// })
	}

	// 去招募页面
	const goZhaoMu = () => {
		uni.navigateTo({
			url: "/pagesA/my/myChild/recruit"
		})
	}

	// 去邀请
	const goYaoqing = () => {
		uni.navigateTo({
			url: "/pagesA/my/myChild/yaoqing"
		})
		// uni.showToast({
		// 	title: "暂未开放",
		// 	icon: "none"
		// })
	}

	//去聊天
	const goOnline = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 去帮助说明
	const goHelpMing = () => {
		// uni.navigateTo({
		// 	url: "/pagesA/my/myChild/helpMing"
		// })
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 去分润列表页面
	const goFenRun = () => {
		uni.navigateTo({
			url: "/pagesA/my/myChild/fenRunList"
		})
	}

	// 使用须知
	const goYongXu = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 联系客服
	const goKefu = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 收款设置
	const goShouKuan = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 系统设置
	const goSystem = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 打开订单
	const selectOrder = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}

	// 提现功能
	const tiXian = () => {
		uni.showToast({
			title: "暂未开放",
			icon: "none"
		})
	}
</script>

<style scoped>
	.orderAll {
		margin-top: 10rpx;
		padding-top: 40rpx;
	}

	.orderIcon {
		width: 56rpx;
		height: 56rpx;
	}

	.defaultOrder {
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/zulindingdan-bg@2x.png") no-repeat;
		height: 234rpx;
		background-size: cover;
	}

	.activeOrder {
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/goumai@2x.png") no-repeat;
		height: 234rpx;
		background-size: cover;
	}

	.orderBg {

		margin-top: 30rpx;
	}

	.jianIcon {
		width: 80rpx;
		height: 76rpx;
	}

	.jianBottom {
		margin-bottom: 14rpx;
	}

	.tuiJianMain {
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.tuiJianBg {
		height: 412rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/gongju-bg@2x.png") no-repeat;
		background-size: cover;
		margin-top: 30rpx;
	}

	.moneyTop {
		margin-top: 18rpx;
	}

	.tixian {
		width: 108rpx;
		height: 46rpx;
		background: #04FFFF;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #005A64;
		margin-right: 20rpx;
	}

	.moneyBg {
		height: 210rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/qianbao-bg@2x.png") no-repeat;
		background-size: cover;
		margin-top: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.shareBtn {
		width: 164rpx;
		height: 72rpx;
		background: linear-gradient(135deg, #A102FF 0%, #162CFF 100%);
		border-radius: 36rpx;
	}

	.shareCon {
		width: 100%;
		padding-right: 30rpx;
		padding-left: 90rpx;
		box-sizing: border-box;
	}

	.shareBg {
		height: 120rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/yaoqing-b@2x.png") no-repeat;
		background-size: cover;
		margin-top: 52rpx;
	}

	.userIcon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
		border-radius: 80rpx;
		/* position: relative;
		z-index: 10; */
	}

	.userBg {
		width: 130rpx;
		height: 164rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/touxiang-bg@2x.png") no-repeat;
		background-size: cover;
		margin-top: 58rpx;
		margin-right: 44rpx;
		overflow: hidden;
		/* position: relative;
		z-index: 20; */
	}

	.userPicBox {
		width: 104rpx;
		height: 104rpx;
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/touxiangkuang@2x.png") no-repeat;
		background-size: cover;
	}

	.myPage {
		/* 	width: 100%;
		height: 100%; */
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/my/gerenzhongxin-bg@2x.png") no-repeat;
		background-size: cover;
		padding-bottom: var(--window-bottom);
	}
</style>